<template>
<div>
  <vm-common-header
    :pageTitle="pageTitle"
    :goBack="goBack"></vm-common-header>
  <div class="vm-common-work_bench container">
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
      :autoFill="false">
      <swipeout>
        <swipeout-item
          :disabled="disabled"
          ref="swipeoutItem"
          :right-menu-width="30"
          :sensitivity="15"
          v-for="(item, key) in projectListData"
          :key="key"
          :auto-close-on-button-click="false">
          <div slot="right-menu" class="right_menu">
            <swipeout-button style="background-color: #f0ad4e;" @click.native="examine(item,key)" type="primary">审核</swipeout-button>
            <swipeout-button style="background-color: #dd524d;" @click.native="process(item,key)" type="primary">流程</swipeout-button>
            <swipeout-button style="background-color: #c7c7cc;" @click.native="deleteItem(item,key)" type="primary">删除</swipeout-button>
          </div>
          <div slot="content" class="demo-content vux-1px-b">
            <ul>
              <li ref="oli" class="mui-selected vm-work_bench-item mui-table-view-cell">
                <router-link class="mui-slider-handle" tag="div" :to="`/common_details/${item.id}/项目详情`">
                  <h5 class="vm-work_bench-item-title">
                    <h3>项目名称：{{ item.cProductName }}</h3>
                    <x-icon type="ios-arrow-right" size="22"></x-icon>
                  </h5>
                  <div class="vm-work_bench-item-body">
                    <div style="flex: 1;">
                      <span>审核状态：</span>
                      <em class="is-status-o" v-if="item.ichecked == 1">已审核</em>
                      <em class="is-status-n" v-else>未审核</em>
                    </div>
                    <div>
                      <span>责任人：</span>
                      <em>{{ item.cRealName }}</em>
                    </div>
                    <div>
                      <span>责任人电话：</span>
                      <em>{{ item.cContactPhone }}</em>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </swipeout-item>
      </swipeout>
      <vm-common-noData v-if="!projectListData.length"></vm-common-noData>
    </mt-loadmore>
    <!-- 审批弹框 -->
    <mt-popup
      v-model="examineStatus"
      position="bottom"
      class="vm-examine-warp">
      <div class="examine-warp">
        <div class="examine-t">
          <i class="vm-icon examine"></i>
          <h5>审核</h5>
        </div>
        <div class="examine-b">
          <div class="examine-b-btn">
            <mt-button :class="[{'active': isActive1}]" @click="isActive1 = true;isActive2 = false;">通过</mt-button>
            <mt-button :class="[{'active': isActive2}]" size="small" @click="isActive2 = true;isActive1 = false;">不通过</mt-button>
          </div>
          <div class="examine-b-con">
            <div class="examine-b-con-reason">
              <i class="vm-icon reason"></i>
              <h5>原因</h5>
            </div>
            <input type="text" v-model="reasonData" class="examine-b-con-reason" placeholder="请输入内容">
          </div>
        </div>
        <div class="examine-f">
          <mt-button type="danger" @click="submitExamine">提交</mt-button>
        </div>
      </div>
    </mt-popup>
    <vm-common-examine-process
      ref="examine_process"
      @close="closeSwipeout"></vm-common-examine-process>
  </div>
</div>
</template>


<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import { project_getlist, project_delete } from '@/api/work_bench.js'
  import {Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
  import { MessageBox } from 'mint-ui'
  import { checkuserstat, doworkflow, updatestate, getworkflowrecord } from '@/api/examine.js'
  export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        projectListPage: 1,
        projectListData: new Array(),
        tempItemData: new Array(),
        tempItemKey: null,
        allLoaded: false,
        disabled: false,
        examineStatus: false, // 审批弹框
        isActive1: false, // 审批通过
        isActive2: false, // 审批不通过
        reasonData: '', // 审批描述
        workflowrecord: new Array(), // 审批流程数据
        detailsId: '', // 当前id
        ichecked: null // 当前审核状态，1为已审核
      }
    },
    created () {
      this.getproject_getlistData();
    },
    methods: {
      // 获取项目部位管理数据
      getproject_getlistData(loadmoreType) {
        let projectListPage = this.projectListPage;
        project_getlist(projectListPage).then(res => {
          if (!res.data.data.length) {
            this.allLoaded = true; // 若数据已全部获取完毕
          }
          if (!this.projectListData.length || projectListPage == 1) {
            this.allLoaded = false;
            this.projectListData = res.data.data;
          } else {
            this.projectListData = this.projectListData.concat(res.data.data);
          }
          if (loadmoreType == 'top') {
            this.$refs.loadmore.onTopLoaded();
          } else if (loadmoreType == 'bottom') {
            this.$refs.loadmore.onBottomLoaded();
          }
        })
      },
      // 下拉刷新
      loadTop() {
        this.projectListPage = 1;
        this.getproject_getlistData('top');
      },
      // 上拉加载
      loadBottom() {
        this.projectListPage++;
        this.getproject_getlistData('bottom');
      },
      // 是否有审核权限
      async examine(item, key) {
        const objType = 'project';
        let tempItemData = this.tempItemData = item;
        this.tempItemKey = key;
        let isStatus = await checkuserstat(objType, tempItemData.id).then(res => Number(res.data));
        if (isStatus != 1) {
          this.$toast(isStatus);
          return;
        }
        if ( Object.is(isStatus, 1) ) {
          this.examineStatus = !this.examineStatus;
        }
      },
      // 点击审批按钮
      async submitExamine() {
        let objType = 'project'; // 项目类型
        let id = this.tempItemData.ID;
        let ichecked = this.tempItemData.ichecked;
        let tempItemKey = this.tempItemKey;
        let opinion;
        if ( !this.isActive1 && !this.isActive2 ) {
          this.$toast('请选择是否通过审批！')
          return;
        } else {
          opinion = this.isActive1 ? 1 : 2;
        }
        let description = this.reasonData;
        let res = await doworkflow(objType, id, opinion, description).then(res => res);
        if ( res.data.data == 1 && res.data.status == 200 ){
          if ( ichecked == 1 ) {
            this.$toast('该项目已审核！');
            this.examineStatus = false;
            return;
          }
          await updatestate(objType, id).then(res => {
            if (res.data.data == 1 && res.data.status == 200 ) {
              this.projectListData[tempItemKey].ichecked = 1;
              this.$toast(res.data.message);
              this.examineStatus = false;
            }
          })
        } else if ( res.data.data == 2 && res.data.status == 200 ) {
          if ( ichecked == 1 ) {
            this.$toast('该项目已审核！');
            this.examineStatus = false;
            return;
          }
          this.projectListData[tempItemKey].ichecked = 1;
          this.$toast('操作成功！');
          this.examineStatus = false;
        } else {
          this.$toast('操作失败！');
          this.examineStatus = false;
        }
      },
      // 删除该项目
      deleteItem (item,key) {
        let id = item.ID;
        MessageBox.confirm('确定是否删除该条记录？').then(action => {
          project_delete(id).then(res => {
            if (res.status == 200) {
              this.$toast('删除成功');
              this.$refs.swipeoutItem[key].close();
              this.projectListData.splice(key,1);
            } else {
              this.$toast('删除失败');
              this.$refs.swipeoutItem[key].close();
            }
          })
        }).catch(() => {
          this.$refs.swipeoutItem[key].close();
        })
      },
      // 关闭右侧滑出弹窗
      closeSwipeout (flag) {
        if (!flag) {
          for ( let o of this.$refs.swipeoutItem) {
            o.close();
          }
        }
      },
      // 查看审批流程
      process(item, key) {
        this.$refs.examine_process.init(item, key,{
          id: 'id',
          objType: 'project'
        });
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton
    },
    watch: {
      examineStatus (newV) {
        this.closeSwipeout(newV);
      }
    }
  }
</script>
<style scoped lang="scss">
.vm-common-work_bench.container {
  .right_menu {
    display: flex;
    position: absolute;
    right: 0;
  }
}
/* 审批弹框 */
.vm-examine-warp {
  width: 100%;
  .examine-warp {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 28px 0px 25px;
    .examine-t {
      height: 87px;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #f4f4f4; /* no */
      margin-bottom: 40px;
      i.vm-icon.examine {
        display: inline-block;
        width: 26px;
        height: 26px;
        padding-right: 50px;
        background-position: -123px -55px;
      }
      h5 {
        font-size: 28px;
        color: #333;
        font-weight: bold;
      }
    }
    .examine-b {
      margin-bottom: 30px;
      .examine-b-con {
        display: flex;
        flex-direction: column;
        .examine-b-con-reason {
          display: flex;
          i.vm-icon.reason {
            display: inline-block;
            width: 26px;
            height: 26px;
            background-position: -123px -83px;
            padding-right: 50px;
          }
          h5 {
            display: flex;
            height: 55px;
            font-size: 28px;
            color: #333;
            font-weight: bold;
            border-bottom: 2px solid #f4f4f4; /* no */
            margin-bottom: 40px;
          }
        }
        input.examine-b-con-reason {
          min-height: 200px;
          width: 100%;
          border-radius: 15px; /* no */
        }
      }
    }
    .examine-f {
      margin-bottom: 30px;
      button {
        border-radius: 10px; /* no */
        width: 100%;
        height: 90px;
        background-color: #f34c4f;
      }
    }
  }
}
</style>
